JavaScript有三种逻辑运算符，可以用于布尔型或非布尔型的数据类型。在本文中我们一起来探讨一下布尔型数据的逻辑运算。

与运算符写作两个与符号： &&。布尔型数据进行与运算时，所有的运算数据值都为真，整个式子结果才为真。如果其中一个或两个运算数据值为假，则与的结果也是假：

或运算符写作两个通道符 ||。布尔数据进行或运算时只要有一个值为真则整个运算式值也为真：

Logical 逻辑非运算符写作一个感叹号： !。 只能用于单个运算数据。运算数据值为真时结果为假，反之结果为真：

关于JavaScript逻辑运算符有两点很重要。一是运算时求值顺序从左到右，二是运算时会短路。 逻辑或运算时，第一个运算数据值为真，JavaScript就会让整个运算短路，第二个运算数据连看都不看。下面的例子里，星号部分**表示这里可以是任何值，完全不影响运算，JavaScript甚至都不会去看这个或运算符右边的数据

再看另外一个例子：

不管第二个数据值是不是参加或运算，只要第一个值为真，第二个值JavaScript就不管了。 现在大家可能有问题要问了，如果第一个值为假呢？问得好。 看看下面的例子，大家觉得会有什么结果？

要记住，逻辑或运算只需要其中一个数据值为真即为真。从左到右依次求值，第一个值为假，所以这次的式子不会短路。相反，JavaScript会继续求第二个数据的值。第二个值为真，所以最后结果也是真。

那么为什么说理解短路求值很重要呢？

因为短路功能可以给我们带来些方便。下面的例子中，我们有一个 人对象数据。这个数据里有一个 名字和一个 年龄属性数据。然后我们要用控制台命令 console.log把 人的 工作属性打印出来。问题是我们无法确定一个 人对象是不是含有 工作属性，所以我们可以运用 或运算和短路求值来更方便地解决这个问题：

这个例子中我们对 人.工作数据和一个默认字符串 '无业'数据进行或运算，再用控制台命令 console.log打印出运算结果。这里 人.工作属性并不存在，所以它的值求出来是 未定义。 未定义这个值等同于假，因此JavaScript会继续去求 或符号另一边的数据值，最后结果会和第二个值一致。

为了更清楚地说明这一点，我们看看如果 人对象包含一个 工作属性会怎么运算：

这次， 人.工作属性存在，所以和之前不同，式子会短路求值， 人.工作的值 教师会打印到控制台上去。

想复习一下JavaScript中哪些值等同于假吗？看一下JavaScript中的对决

很多人用过这个例子，这一段代码摘自stack overflow：

看一下代码，想一下控制台会打印出来什么。想好了吗？看看下面的答案。

有没有猜是 4？不错。如果没猜对也没关系，我们分步骤来看看:

a, b, c的值都为假。或运算看到假就继续求值。到变量b这一处时得到了 4这个值，整个运算式短路，所以 4这个值赋给了变量 f。

往期精选文章

使用虚拟dom和JavaScript构建完全响应式的UI框架

扩展 Vue 组件

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货：CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包

小手一抖，资料全有。长按二维码关注京程一灯，阅读更多技术文章和业界动态。